<!-- Inspired from : https://threejs.org/examples/#misc_controls_orbit -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - head controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="noindex, nofollow" />

    <script src="../../../libs/three/v112/three.min.js"></script>

    <!-- JEEFACEFILTER API (required by HeadControls.js) -->
    <script src="../../../dist/jeelizFaceFilter.js"></script>

    <!-- HeadControls script -->
    <script src="../../../helpers/HeadControls.js"></script>

    <!-- HeadControls Wrapper (provides THREE.HeadControls) -->
    <script src="ThreeHeadControls.js"></script>

    <!-- Main script: -->
    <script src="./main.js"></script>

    <style>
      body {
        color: #000;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #fff;
        margin: 0px;
        overflow: hidden;
      }

      #info {
        color:#000;
        position: absolute;
        top: 0px; width: 100%;
        padding: 5px;
      }

      a {
        color: red;
      }

      #headControlsCanvas {
        position: fixed;
        right: 0px;
        bottom: 0px;
        z-index: 1000;
        transform-origin: bottom right;
        max-height: 25%;
        max-width: 25%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div id="info">
      <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - head controls example. 3D scene from orbit control example.
    </div>

    <!-- This canvas will be used to display the head tracking: //-->
    <canvas id='headControlsCanvas' width='512' height='512'></canvas>
 
  </body>
</html>
